<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Avatar</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/5.14.0/css/all.min.css" rel="stylesheet">
    <link rel="stylesheet" href="../dist/aqua.css" />
    <link rel="stylesheet" href="./styles/demo.css" />
</head>

<body>
    <div>
        <span class="avatar">
            <img src="https://assets.codepen.io/1256482/internal/avatars/users/default.png?format=auto&height=80&version=1568462706&width=80" alt="">
        </span>
    </div>
    <div class="mt-4 space-x-2">
        <span class="avatar avatar-primary">
            <div class="fab fa-codepen"></div>
        </span>
        <span class="avatar avatar-secondary">
            <div class="fab fa-codepen"></div>
        </span>
        <span class="avatar avatar-info">
            <div class="fab fa-codepen"></div>
        </span>
        <span class="avatar avatar-warning">
            <div class="fab fa-codepen"></div>
        </span>
        <span class="avatar avatar-danger">
            <div class="fab fa-codepen"></div>
        </span>
    </div>
    <div class="mt-4 -space-x-4">
        <span class="avatar avatar-primary">
            <div class="fab fa-codepen"></div>
        </span>
        <span class="avatar avatar-secondary">
            <div class="fab fa-codepen"></div>
        </span>
        <span class="avatar avatar-info">
            <div class="fab fa-codepen"></div>
        </span>
        <span class="avatar avatar-warning">
            <div class="fab fa-codepen"></div>
        </span>
        <span class="avatar avatar-danger">
            <div class="fab fa-codepen"></div>
        </span>
    </div>
</body>

</html>